{extend name="common/head"/}
{block name="body"}
<div class="container-fluid p-t-15">

	<div class="row">

		<div class="col-lg-12">
			<div class="card">
				<header class="card-header">
					<div class="card-title">数据库备份</div>
				</header>
				<div class="card-body">
					<div id="toolbar" class="toolbar-btn-action">
						<button id="btn_backup" type="button" class="btn btn-primary">
							<span class="mdi mdi-checkbox-marked-circle-outline" aria-hidden="true"></span>数据备份
						</button>
						<button id="btn_optimize" type="button" class="btn btn-info">
							<span class="mdi mdi-play-circle-outline" aria-hidden="true"></span>数据优化
						</button>
						<button id="btn_repair" type="button" class="btn btn-danger">
							<span class="mdi mdi-window-close" aria-hidden="true"></span>数据修复
						</button>
					</div>
					<table id="tb_departments" style="table-layout: fixed;word-break:break-all;"></table>
				</div>
			</div>
		</div>

	</div>

</div>
{/block}
{block name="script"}
{include file="common/footer" base="base" /}
<!--以下是tree-grid的使用示例-->
<link href="{__ADMIN__}/js/jquery-treegrid/jquery.treegrid.min.css" rel="stylesheet">
<script src="{__ADMIN__}/js/jquery-treegrid/jquery.treegrid.min.js" type="text/javascript"></script>
<script src="{__ADMIN__}/js/bootstrap-table/extensions/treegrid/bootstrap-table-treegrid.min.js"
		type="text/javascript"></script>
<script type="text/javascript">
	$('#tb_departments').bootstrapTable({
		classes: 'table table-bordered table-hover table-striped',
		url: '/admin/database/database',
		method: 'get',
		dataType: 'json', // 因为本示例中是跨域的调用,所以涉及到ajax都采用jsonp,
		uniqueId: 'id',
		idField: 'id', // 每行的唯一标识字段
		toolbar: '#toolbar', // 工具按钮容器
		//clickToSelect: true,     // 是否启用点击选中行
		showColumns: true, // 是否显示所有的列
		showRefresh: true, // 是否显示刷新按钮
		showToggle: true, // 是否显示详细视图和列表视图的切换按钮(clickToSelect同时设置为true时点击会报错)
		pagination: true, // 是否显示分页
		sortOrder: "asc", // 排序方式

		// 传递参数
		queryParams: function(params) {
			return {
				limit: params.limit, // 每页数据量
				offset: params.offset, // sql语句起始索引
				page: (params.offset / params.limit) + 1,
				sort: params.sort, // 排序的列名
				sortOrder: params.order // 排序方式'asc' 'desc'
			};
		},
		sidePagination: "client", // 分页方式：client客户端分页，server服务端分页
		pageNumber: 1, // 初始化加载第一页，默认第一页
		pageSize: 10, // 每页的记录行数
		pageList: [10, 25, 50, 100], // 可供选择的每页的行数
		//search: true,                      // 是否显示表格搜索，此搜索是客户端搜索

		//showExport: true,        // 是否显示导出按钮, 导出功能需要导出插件支持(tableexport.min.js)
		//exportDataType: "basic", // 导出数据类型, 'basic':当前页, 'all':所有数据, 'selected':选中的数据

		columns: [{
			field: 'example',
			checkbox: true // 是否显示复选框
		}, {
			field: 'name',
			title: '数据表',
			// 居中显示
			align: 'center',
			width:220
		}, {
			field: 'engine',
			align: 'center',
			title: '存储引擎',
			width:90
		}, {
			field: 'row_format',
			align: 'center',
			title: '行格式',
			width:90
		},{
			field: 'rows',
			align: '行数',
			title: '操作数据ID',
			width:100
		}, {
			field: 'data_size',
			align: 'center',
			title: '字节数',
			width:120
		},{
			field: 'data_length',
			align: 'center',
			title: '数据大小',
			width:120
		}, {
			field: 'comment',
			align: 'center',
			title: '数据表注释',
		}, {
			field: 'create_time',
			align: 'center',
			title: '创建时间',
			width:160
		}],
	});
</script>
{/block}
</body>
</html>